<template>
  <div class="distribution-container">
    <div class="chart" id="chart_right2"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts';
import 'echarts-gl';
import { getsystem } from '@/api/echarts'
export default {
  name: "distribution",
  data() {
    return {
      normalEquipment: 0,
      alarmEquipment: 0,
      offlineEquipment: 0,
      faultEquipment: 0,
      unableEquipment: 0
    }
  },
  created() {
    getsystem().then(res => {
      this.normalEquipment = res.msg.normalEquipment
      this.alarmEquipment = res.msg.alarmEquipment
      this.offlineEquipment = res.msg.offlineEquipment
      this.faultEquipment = res.msg.faultEquipment
      this.unableEquipment = res.msg.unableEquipment
      this.getEchartRight();
    })
  },
  methods: {
  getEchartRight() {
    let myChart = echarts.init(document.getElementById('chart_right2'));

    // 对数据进行对数处理，避免数值差距过大
    const processLog = (value) => {
      return value > 0 ? Math.log10(value) : 0; // 使用log10进行对数处理
    };

    const logData = [
      { value: processLog(this.normalEquipment), name: '正常', originalValue: this.normalEquipment },
      { value: processLog(this.alarmEquipment), name: '报警', originalValue: this.alarmEquipment },
      { value: processLog(this.offlineEquipment), name: '离线', originalValue: this.offlineEquipment },
      { value: processLog(this.faultEquipment), name: '故障', originalValue: this.faultEquipment },
      { value: processLog(this.unableEquipment), name: '未启用', originalValue: this.unableEquipment }
    ];

    let option = {
      color: ['#00FFBF', '#FF007F', '#8F00FF', '#FF6F61', '#DFFF00', '#FFAD05', '#4465fc'],
      tooltip: {
        trigger: 'item',
        formatter: (params) => `${params.name}: ${params.data.originalValue} (${params.percent}%)`
      },
      series: [{
        type: 'pie',
        radius: ['30%', '70%'],  // 调整半径比例
        label: {
          normal: {
            show: true,
            formatter: (params) => `${params.name}: ${params.data.originalValue}`, // 显示原始值
            textStyle: {
              fontSize: 14,
              fontWeight: 'bold'
            }
          }
        },
        labelLine: {
          normal: {
            length: 20,
            length2: 30,
            smooth: true  // 平滑的标签线
          }
        },
        data: logData
      }]
    };

    myChart.setOption(option, true);
    window.addEventListener('resize', () => {
      myChart.resize();
    });
  },
}

};
</script>

<style lang="scss" scoped>
.distribution-container {
  .chart {
    height: 3rem;
  }
}
</style>
